<!DOCTYPE html>
<html>
<head>
<title>Electrostatic Image Method</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #eee;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and Coordinate System Setup ---
  ctx.fillStyle = 'black';
  ctx.strokeStyle = 'black';
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const scale_a = 120; // Represents distance 'a' in pixels

  ctx.translate(centerX, centerY);

  // --- Draw Vertical Conductor Line (S) ---
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(0, -180);
  ctx.lineTo(0, 180);
  ctx.stroke();

  // Add Ticks on Vertical Line
  for (let i = -4; i <= 4; i++) {
    if (i !== 0) {
      ctx.beginPath();
      ctx.moveTo(0, i * 40);
      ctx.lineTo(8, i * 40);
      ctx.stroke();
    }
  }

  // --- Draw Horizontal Dashed Line ---
  ctx.beginPath();
  ctx.setLineDash([6, 6]);
  ctx.moveTo(-220, 0);
  ctx.lineTo(220, 0);
  ctx.stroke();
  ctx.setLineDash([]); // Reset to solid line

  // --- Draw Charges (Q and Q') ---
  const chargeRadius = 4.5;
  const qx = scale_a;
  const qPrimeX = -scale_a;

  // Charge Q
  ctx.beginPath();
  ctx.arc(qx, 0, chargeRadius, 0, 2 * Math.PI);
  ctx.fill();

  // Charge Q'
  ctx.beginPath();
  ctx.arc(qPrimeX, 0, chargeRadius, 0, 2 * Math.PI);
  ctx.fill();

  // --- Draw Force Vector F ---
  ctx.lineWidth = 2;
  ctx.beginPath();
  const forceStart = qx + chargeRadius;
  const forceEnd = forceStart + 80;
  ctx.moveTo(forceStart, 0);
  ctx.lineTo(forceEnd, 0);
  // Arrowhead
  ctx.moveTo(forceEnd, 0);
  ctx.lineTo(forceEnd - 10, -6);
  ctx.moveTo(forceEnd, 0);
  ctx.lineTo(forceEnd - 10, 6);
  ctx.stroke();
  ctx.lineWidth = 1.5;

  // --- Draw Labels ---
  ctx.textAlign = 'center';

  // Label Q and Q' with tilde
  ctx.font = 'italic 24px "Times New Roman"';
  ctx.textBaseline = 'bottom';
  ctx.fillText('Q', qx, -12);
  ctx.fillText("Q'", qPrimeX, -12);

  // Tildes (~) over the charges
  ctx.font = '24px "Times New Roman"';
  ctx.fillText('~', qx, -33);
  ctx.fillText('~', qPrimeX, -33);

  // Label F
  ctx.font = 'italic 24px "Times New Roman"';
  ctx.textBaseline = 'middle';
  ctx.fillText('F', forceEnd + 15, 0);

  // Label 'a'
  ctx.font = 'italic 20px "Times New Roman"';
  ctx.textBaseline = 'top';
  ctx.fillText('a', qx / 2, 8);
  ctx.fillText('a', qPrimeX / 2, 8);

  // Label σ (sigma)
  ctx.font = 'italic 22px "Times New Roman"';
  ctx.textBaseline = 'bottom';
  ctx.fillText('σ', 0, -185);

  // Label S
  ctx.textBaseline = 'top';
  ctx.fillText('S', 0, 185);

  // Chinese Labels
  ctx.font = '22px "SimSun", "Songti SC", sans-serif';
  
  // Label "导体" (Conductor)
  ctx.textBaseline = 'middle';
  ctx.fillText('导 体', -scale_a - 50, 80);

  // Label "图 1" (Figure 1)
  ctx.textBaseline = 'top';
  ctx.fillText('图 1', 0, 220);

</script>

</body>
</html>